<div class="section @@classes section-lg">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <h2 class="h5 mb-6">Blog Cards</h2>
            </div>
        </div>
        <!-- End of title-->
        <div class="row mb-5">
            <div class="col-12 col-md-6 col-lg-4 mb-5">
                <div class="card bg-primary border-light shadow-soft">
                    <img src="@@path/assets/img/blog/blog-article-1.jpg" class="card-img-top rounded-top" alt="Themesberg office">
                    <div class="card-body">
                        <span class="h6 icon-tertiary small"><span class="fas fa-medal mr-2"></span>Awards</span>
                        <h3 class="h5 card-title mt-3">We partnered up with Google</h3>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary btn-sm">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5">
                <div class="card bg-primary border-light shadow-soft">
                    <div class="card-header p-3">
                        <img src="@@path/assets/img/blog/blog-article-2.jpg" class="card-img-top rounded" alt="Designer desk">
                    </div>
                    <div class="card-body pt-2">
                        <div class="media d-flex align-items-center justify-content-between">
                            <div class="post-group">
                                <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
                                    <img class="avatar-sm mr-2 img-fluid rounded-circle" src="@@path/assets/img/team/profile-picture-2.jpg" alt="Jo portrait"> Jo J. Moore
                                </a>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span>
                            </div>
                        </div> 
                        <h3 class="h5 card-title mt-4">We partnered up with Google</h3>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary btn-sm">Learn More</a>
                    </div>
                  </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5">
                <div class="card bg-primary shadow-soft text-center border-light">
                    <div class="card-header">
                        <span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span>
                    </div>
                    <div class="card-body">
                      <h3 class="h5 card-title">We partnered up with Google</h3>
                      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                      <a href="#" class="btn btn-primary btn-sm">Learn More</a>
                    </div>
                    <div class="card-footer">
                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
                            <img class="avatar-sm mr-2 img-fluid rounded-circle" src="@@path/assets/img/team/profile-picture-2.jpg" alt="Moore avatar"> Jo J. Moore
                        </a>
                    </div>
                  </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card bg-primary shadow-inset border-light">
                    <div class="card-body p-5">
                        <h3 class="h4 card-title mb-3">We partnered up with Google</h3>
                        <span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span>
                        <p class="card-text mt-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <div class="d-flex align-items-center">
                            <a href="#" class="btn btn-primary btn-sm mr-3">Learn More</a>
                            <a href="#" class="small"><span class="far fa-comments mr-2"></span>21</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="section section-lg pt-0">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <h2 class="h5 mb-7">Profile Cards</h2>
            </div>
        </div>
        <!-- End of title-->
        <div class="row justify-content-between">
            <div class="col-12 col-md-6 col-lg-4 mb-6 mb-md-5">
                <!-- Profile Card -->
                <div class="profile-card mb-5">
                    <div class="card bg-primary shadow-inset border-light text-center">
                        <div class="card-header">
                            <div class="profile-image bg-primary shadow-inset border border-light rounded mx-auto p-3 mt-n6">
                                <img src="@@path/assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Leos Portrait">
                            </div>
                        </div>
                        <div class="card-body pb-5">
                            <h3 class="h5 mb-2">Jose Leos</h3>
                            <span class="h6 font-weight-normal text-gray mb-3">Co-Founder</span>
                            <ul class="list-unstyled d-flex justify-content-center mt-3 mb-4">
                                <li>
                                    <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                        <span class="fab fa-facebook-f"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                                        <span class="fab fa-twitter"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                        <span class="fab fa-slack-hash"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                                        <span class="fab fa-dribbble"></span>
                                    </a>
                                </li>
                            </ul>
                            <a class="btn btn-sm btn-primary mr-3" href="#">
                                <span class="fas fa-user-plus mr-1"></span> Follow
                            </a>
                            <a class="btn btn-sm btn-primary" href="#">
                                Message
                            </a>                                
                        </div>
                    </div>
                </div>
                <!-- End of Profile Card -->
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-6 mb-md-5">
                <!-- Profile Card -->
                <div class="profile-card mb-5">
                    <div class="card bg-primary shadow-soft border-light">
                        <div class="profile-image bg-primary shadow-inset border border-light rounded p-3 ml-3 mt-n5">
                            <img src="@@path/assets/img/team/profile-picture-3.jpg" class="card-img-top rounded" alt="Bonnie Avatar">
                        </div>
                        <div class="card-body">
                            <h3 class="h5 mb-2">Bonnie Green</h3>
                            <span class="h6 font-weight-normal text-gray mb-3">Web Designer</span>
                            <ul class="list-unstyled d-flex my-3">
                                <li>
                                    <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                        <span class="fab fa-facebook-f"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                                        <span class="fab fa-twitter"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                        <span class="fab fa-slack-hash"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                                        <span class="fab fa-dribbble"></span>
                                    </a>
                                </li>
                            </ul>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
                <!-- End of Profile Card -->
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-4 mb-md-5">
                <!-- Profile Card -->
                <div class="profile-card mb-5">
                    <div class="card bg-primary shadow-soft border-light">
                        <div class="profile-image bg-primary shadow-inset border border-light rounded-circle p-3 ml-3 mt-n5">
                            <img src="@@path/assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-circle" alt="Christopher Avatar">
                        </div>
                        <div class="card-body">
                            <h3 class="h5 mb-2">Christopher Wood</h3>
                            <span class="h6 font-weight-normal text-gray mb-3">Marketing</span>
                            <ul class="list-unstyled d-flex my-3">
                                <li>
                                    <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                        <span class="fab fa-facebook-f"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                                        <span class="fab fa-twitter"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                        <span class="fab fa-slack-hash"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                                        <span class="fab fa-dribbble"></span>
                                    </a>
                                </li>
                            </ul>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
                <!-- End of Profile Card -->
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-0">
                <!-- Profile Card -->
                <div class="card bg-primary shadow-soft border-light">
                    <div class="card-header p-4">
                        <img src="@@path/assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Wood Portrait">
                    </div>
                    <div class="card-body pt-2">
                        <h3 class="h5 mb-2">Christopher Wood</h3>
                        <span class="h6 font-weight-normal text-gray mb-4">Co-Founder Themesberg</span>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <ul class="list-unstyled d-flex my-3">
                            <li>
                                <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                    <span class="fab fa-facebook-f"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                                    <span class="fab fa-twitter"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                    <span class="fab fa-slack-hash"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                                    <span class="fab fa-dribbble"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of Profile Card -->
            </div>
        </div>
    </div>
</section>
<div class="section section-lg pt-0">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <h2 class="h5 mb-7">Pricing Cards</h2>
            </div>
        </div>
        <!-- End of title-->
        <div class="row mb-5">
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                <div class="card bg-primary shadow-soft border-light text-center py-4">
                    <!-- Header -->
                    <div class="card-header p-3">
                        <h3 class="text-gray mb-4">Basic</h3>
                        <span class="d-block">
                            <span class="display-1 font-weight-bold">
                                <span class="align-top font-medium">$</span>19
                        </span>
                        <span class="d-block text-gray font-small">/ month</span>
                        </span>
                    </div>
                    <!-- End Header -->
                    <!-- Content -->
                    <div class="card-body">
                        <ul class="list-unstyled mb-4">
                            <li class="list-item pb-3"><strong>1</strong> free domain</li>
                            <li class="list-item pb-3">Storage space: <strong>5GB</strong></li>
                            <li class="list-item pb-3"><strong>100k</strong> monthly visitors</li>
                            <li class="list-item pb-3">One-click staging site</li>
                            <li class="list-item pb-3">Search engine wizard </li>
                            <li class="list-item pb-3">Community support</li>
                        </ul>
                        <button type="button" class="btn btn-primary btn-block">Start
                            Starter</button>
                    </div>
                    <!-- End Content -->
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                <div class="card bg-primary shadow-soft border-light p-4">
                    <!-- Header -->
                    <div class="card-header border-bottom text-center">
                        <span class="d-block">
                            <span class="display-1 font-weight-bold">
                            <span class="align-top font-medium">$</span>19
                        </span>
                        <span class="text-gray font-small">/ month</span>
                        </span>
                    </div>
                    <!-- End Header -->
                    <!-- Content -->
                    <div class="card-body">
                        <p>Faster sites deliver better business results for your clients.</p>
                        <ul class="list-unstyled mb-4">
                            <li class="list-item pb-2"><strong>Full Support</strong> No</li>
                            <li class="list-item pb-2"><strong>Storage</strong> 50 GB</li>
                            <li class="list-item"><strong>Monthly Visitors</strong> 400k</li>
                        </ul>
                        <button type="button" class="btn btn-primary btn-block">
                            <span class="fas fa-cart-plus mr-3"></span>Add to Cart
                        </button>
                    </div>
                    <!-- End Content -->
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-12 col-lg-6 mb-5 mb-lg-0">
                <div class="card bg-primary shadow-soft border-light">
                    <div class="row no-gutters align-items-center">
                        <div class="col-sm-5">
                            <!-- Header -->
                            <div class="card-header text-center pb-0">
                                <h3 class="mb-0">Basic</h3>
                                <span class="d-block my-3">
                                    <span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>19
                                </span>
                                </span>
                                <button type="button" class="btn btn-sm btn-primary btn-block">Add to Cart</button>
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <!-- Content -->
                            <div class="card-body pb-0">
                                <ul class="list-group list-group-flush price-list mb-4">
                                    <li class="list-group-item border-primary pb-1"><span class="fas fa-headset"></span>Community support</li>
                                    <li class="list-group-item border-primary pb-1"><span class="far fa-hdd"></span>15 GB SSD storage</li>
                                    <li class="list-group-item border-primary pb-1"><span class="far fa-paper-plane"></span>One-click staging site</li>
                                    <li class="list-group-item border-primary pb-1"><span class="far fa-envelope"></span>10 E-mail accounts</li>
                                    <li class="list-group-item border-0"><span class="fas fa-users"></span>Team size: 1-5 developers</li>
                                </ul>
                            </div>
                            <!-- End Content -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card bg-primary shadow-inset border-light p-3">
                    <!-- Content -->
                    <div class="card-body shadow-soft border border-light rounded p-4">
                        <h4 class="mb-3">Regular</h4>
                        <div class="d-flex mb-3"> 
                            <span class="h5 mb-0">$</span> 
                            <span class="price display-2 text-dark mb-0">199</span> 
                        </div>
                        <p class="mb-4">So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.</p>
                        <button type="button" class="btn btn-primary btn-block rounded-bottom">Add to Cart</button>
                    </div>
                    <!-- End Content -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section section-lg pt-0">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <h2 class="h5 mb-7">Call to Action Cards</h2>
            </div>
        </div>
        <!-- End of title-->
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="card bg-primary shadow-soft border-light mb-6">
                    <div class="card-body px-5 py-5 text-center text-md-left">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h2 class="mb-3">Get in touch</h2>
                                <p class="mb-0">
                                    If you need any help with our products or services, choose one of the following ways to contact us.
                                </p>
                            </div>
                            <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                                <a href="#" class="btn btn-primary">
                                    <span class="mr-1">
                                        <span class="fas fa-headphones"></span>
                                    </span>
                                    Contact Us
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-10">
                <div class="card bg-primary shadow-soft border-light px-4 py-1 mb-6">
                    <div class="card-body text-center text-md-left">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h2 class="mb-3">Become one of us</h2>
                                <p class="mb-4">
                                    Do you want to join our team and work remotely from anywhere you'd like? We can’t wait to hear from you!
                                </p>
                                <a href="#" class="btn btn-primary">
                                    <span class="mr-1">
                                        <span class="fas fa-file-invoice"></span>
                                    </span>
                                    Check Careers
                                </a>
                            </div>
                            <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                                <img src="@@path/assets/img/illustrations/reading-side.svg" alt="illustration">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card bg-primary shadow-soft border-light px-4 py-5 text-center mb-5">
                    <div class="card-header pb-0">
                        <h2 class="h1 mb-3">Ready to change your life?</h2>
                    </div>
                    <div class="card-body pt-2 px-0 px-lg-7">
                        <p class="mb-5 lead">
                            Download Rocket today and take the first step to organize your routine, achieve your personal goals and reflect on your life.
                        </p>
                        <a class="btn btn-lg btn-primary mr-md-3 mb-3 mb-sm-0" href="#">
                            <div class="d-flex align-items-center">
                                <span class="icon icon-lg mr-3"><span class="fab fa-apple"></span></span>
                                <div class="d-block text-left">
                                    <small class="font-small">Download on the</small>
                                    <div class="h5 mb-0">App Store</div>
                                </div>
                            </div>
                        </a>
                        <a class="btn btn-lg btn-primary" href="#">
                            <div class="d-flex align-items-center">
                                <span class="icon icon-lg mr-3"><span class="fab fa-google-play"></span></span>
                                <div class="d-block text-left">
                                    <small class="font-small">Download on the</small>
                                    <div class="h5 mb-0">Google Play</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card bg-primary shadow-soft border-light px-4 py-5">
                    <div class="card-header pb-0 text-center">
                        <h2 class="h1 mb-3">Get the most out of your network.</h2>
                        <p class="mb-5 lead">
                            Contact management designed for teams and individuals
                        </p>
                    </div>
                    <div class="card-body pt-2 px-0 px-lg-7">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-8">
                                <div class="form-group">
                                    <label class="h6 font-weight-light text-gray" for="subscribeInputEmail">Email address</label>
                                    <div class="d-flex flex-row justify-content-center">
                                        <div class="input-group">
                                            <input class="form-control form-control-xl border-light" id="subscribeInputEmail" placeholder="example@company.com" type="email">
                                            <div class="input-group-prepend">
                                                <button type="submit" class="btn btn-primary rounded-right">Subscribe</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section section-lg pt-0">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <h2 class="h5 mb-7">Login & Register</h2>
            </div>
        </div>
        <!-- End of title-->
        <div class="row justify-content-md-around">
            <div class="col-12 col-md-6 col-lg-5 mb-5 mb-lg-0">
                <div class="card bg-primary shadow-soft border-light p-4">
                    <div class="card-header text-center pb-0">
                        <h2 class="h4">Sign in to our platform</h2>
                        <span>Login here using your username and password</span>   
                    </div>
                    <div class="card-body">
                        <form action="#" class="mt-4">
                            <!-- Form -->
                            <div class="form-group">
                                <label for="exampleInputIcon333">Your email</label>
                                <div class="input-group mb-4">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><span class="fas fa-envelope"></span></span>
                                    </div>
                                    <input class="form-control" id="exampleInputIcon333" placeholder="example@company.com" type="text" aria-label="email adress">
                                </div>
                            </div>
                            <!-- End of Form -->
                            <div class="form-group">
                                <!-- Form -->
                                <div class="form-group">
                                    <label for="exampleInputPassword777">Password</label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                        </div>
                                        <input class="form-control" id="exampleInputPassword777" placeholder="Password" type="password" aria-label="Password" required>
                                    </div>
                                </div>
                                <!-- End of Form -->
                                <div class="d-block d-sm-flex justify-content-between align-items-center mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck545">
                                        <label class="form-check-label" for="defaultCheck545">
                                          Remember me
                                        </label>
                                    </div>
                                    <div><a href="#" class="small text-right">Lost password?</a></div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-block btn-primary">Sign in</button>
                        </form>
                        <div class="mt-3 mb-4 text-center">
                            <span class="font-weight-normal">or login with</span>
                        </div>
                        <div class="btn-wrapper my-4 text-center">
                            <button class="btn btn-primary btn-pill btn-icon-only text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button">
                                <span aria-hidden="true" class="fab fa-facebook-f"></span>
                            </button>
                            <button class="btn btn-primary btn-pill  btn-icon-only text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button">
                                <span aria-hidden="true" class="fab fa-twitter"></span>
                            </button>
                            <button class="btn btn-primary btn-pill btn-icon-only text-facebook" type="button" aria-label="github button" title="github button">
                                <span aria-hidden="true" class="fab fa-github"></span>
                            </button>
                        </div>
                        <div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
                            <span class="font-weight-normal">
                                Not registered?
                                <a href="#" class="font-weight-bold">Create account</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5 mb-5 mb-lg-0">
                <div class="card bg-primary shadow-soft border-light p-4">
                    <div class="card-header text-center pb-0">
                        <h2 class="mb-0 h5">Create Account</h2>                               
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <!-- Form -->
                            <div class="form-group">
                                <label for="exampleInputIcon999">Your email</label>
                                <div class="input-group mb-4">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><span class="fas fa-envelope"></span></span>
                                    </div>
                                    <input class="form-control" id="exampleInputIcon999" placeholder="example@company.com" type="text" aria-label="email adress">
                                </div>
                            </div>
                            <!-- End of Form -->
                            <div class="form-group">
                                <!-- Form -->
                                <div class="form-group">
                                    <label for="exampleInputPassword345">Password</label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                        </div>
                                        <input class="form-control" id="exampleInputPassword345" placeholder="Password" type="password" aria-label="Password" required>
                                    </div>
                                </div>
                                <!-- End of Form -->
                                <!-- Form -->
                                <div class="form-group">
                                    <label for="exampleConfirmPassword712">Confirm Password</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                        </div>
                                        <input class="form-control" id="exampleConfirmPassword712" placeholder="Confirm password" type="password" aria-label="Password" required>
                                    </div>
                                </div>
                                <!-- End of Form -->
                                <div class="form-check mb-4">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck634">
                                    <label class="form-check-label" for="defaultCheck634">
                                        I agree to the <a href="#">terms and conditions</a>
                                    </label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-block btn-primary">Sign in</button>
                        </form>
                        <div class="mt-3 mb-4 text-center">
                            <span class="font-weight-normal">or</span>
                        </div>
                        <div class="btn-wrapper my-4 text-center">
                            <button class="btn btn-primary btn-pill btn-icon-only text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button">
                                <span aria-hidden="true" class="fab fa-facebook-f"></span>
                            </button>
                            <button class="btn btn-primary btn-pill  btn-icon-only text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button">
                                <span aria-hidden="true" class="fab fa-twitter"></span>
                            </button>
                            <button class="btn btn-primary btn-pill btn-icon-only text-facebook" type="button" aria-label="github button" title="github button">
                                <span aria-hidden="true" class="fab fa-github"></span>
                            </button>
                        </div>
                        <div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
                            <span class="font-weight-normal">
                                Already have an account?
                                <a href="#" class="font-weight-bold">Login here</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>